<template>
  <div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="监听数据源">
        <com-select
          v-model="form.listenDataSourceId"
          :dictList="dataSourceDict"
          memo="监听数据源"
        />
      </el-form-item>
      <el-form-item label="监听数据表">
        <com-select
          v-model="form.listenTableName"
          :dictList="dataTableDict"
          memo="监听数据表"
        />
      </el-form-item>
      <el-form-item label="监听数据列">
        <com-select
          v-model="form.listenDataKey"
          :dictList="dataTableCol"
          :multiple="true"
          memo="监听数据列"
        />
      </el-form-item>
      <el-divider content-position="left">监听条件</el-divider>
      <template v-for="(item, _index) in form.wheres" :key="_index">
        <div class="_flex _flex-space-x _p10">
          <com-select
            v-model="item.tableWhereKey"
            :dictList="dataTableCol"
            memo="监听条件列"
          />
          <com-select
            v-model="item.tableWhereRule"
            :dictList="dataRuleDict"
            memo="监听条件规则"
          />
          <el-input v-model="item.tableWhereVal" placeholder="监听条件值" />
          <div style="width: 300px">
            <el-button
              type="danger"
              v-if="form.wheres.length > 1"
              circle
              @click="form.wheres.splice(_index, 1)"
              ><el-icon><Minus /></el-icon
            ></el-button>
            <el-button
              type="primary"
              circle
              @click="addWhere()"
              v-if="form.wheres.length == _index + 1"
              ><el-icon><Plus /></el-icon
            ></el-button>
          </div>
        </div>
      </template>
    </el-form>
    <div class="_text-a-c _m-t-20">
      <el-button>取消</el-button>
      <el-button type="primary" @click="save()">保存</el-button>
    </div>
  </div>
</template>

<script>
import ComSelect from "@/components/com-select/com-select.vue";
import toolAction from "@/tool/http/tool-action";
import toolListenCache from "../tool-listen-cache";

let dataSourceAction = toolAction.init("data_source");
let dataListenAction = toolAction.init("data_listen");

export default {
  components: { ComSelect },
  props: {
    param: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      form: this.param.extend_json || {
        listenDataSourceId: undefined,
        wheres: [],
      },
      dataSourceDict: [],
      dataTableDict: [],
      dataTableCol: [],
      dataRuleDict: [],
    };
  },
  watch: {
    "form.listenDataSourceId"() {
      this.initDataTable();
    },
    "form.listenTableName"() {
      this.initDataCol();
    },
  },
  async mounted() {
    this.dataSourceDict = await dataSourceAction.dict();
    this.dataRuleDict = await toolAction.enumDict("data_rule");
    this.initDataTable();
    this.initDataCol();
  },
  methods: {
    save() {
      dataListenAction
        .sync({
          id: this.param.id,
          extend_json: this.form,
        })
        .then((res) => {
          this.$element.msg();
        });
    },
    addWhere() {
      if (!this.form.wheres) {
        this.form.wheres = [];
      }
      this.form.wheres.push({});
    },
    async initDataTable() {
      if (!this.form.listenDataSourceId) {
        return;
      }
      let res = await toolAction.run("/action-table-infos", "*", {
        _dsId: this.form.listenDataSourceId,
      });
      this.dataTableDict = res.map((item) => ({
        name: item.memo || item.name,
        val: item.name,
      }));
    },
    async initDataCol() {
      if (!this.form.listenTableName) {
        return;
      }
      this.dataTableCol = await toolListenCache.dictTableCol(
        this.form.listenDataSourceId,
        this.form.listenTableName
      );
    },
  },
};
</script>

<style></style>
